<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首都图书馆</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #A72821;
            color: #333;
            max-width: 768px;
            margin: 0 auto;
        }

        .header {
            background-color: #b71c1c;
            color: white;
            padding: 15px 15px;
            position: relative;
            text-align: center;
        }

        .header .back-btn {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
        }

        .header .menu-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 20px;
        }

        .banner-img {
            width: 100%;
            height: auto;
        }

        .container {
            background-color: #A72821;
            padding: 0;
            max-width: 750px;
            opacity: 0;
        }

        .content {
            padding: .3rem;

        }

        .intro-box {
            background-color: rgba(0, 0, 0, 0.2);
            color: #FEDFC0;
            padding: .14rem .2rem;
            border-radius: .2rem;
            margin-bottom: .12rem;
            line-height: .46rem;
            margin-top: -3.2rem;
            position: relative;
            font-size: .28rem;
            z-index: 2;
        }

        .series-grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0;
            background: url(./img/c.png);
            background-repeat: repeat-y;
            background-size: 100% auto;
            width: 100%;
            box-sizing: border-box;
            padding: .05rem .2rem;
        }

        .series-t,
        .series-f {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0;
            background-image: url(./img/t.png);
            background-repeat: repeat-y;
            background-size: 100% auto;
            width: 100%;
            height: .33rem;
            box-sizing: border-box;
            padding: .05rem .2rem;
        }

        .series-f {
            background-image: url(./img/f.png);
        }

        .series-item {
            width: 50%;
            padding: 0 8px 18px;
        }

        .series-card {
            overflow: hidden;
            display: block;
            color: #333;
            text-decoration: none;
        }



        .series-img-container {
            position: relative;
            overflow: hidden;
            height: 1.77rem;
            /* width: 3.15rem; */
            box-shadow: 0px .04rem .12rem 0px rgba(129, 19, 13, 1);
            border-radius: .2rem;
        }

        .series-img {
            width: 100%;
            height: 1.77rem;
            /* object-fit: cover;
            transition: transform 0.5s ease; */
        }

        .series-card:hover .series-img {
            transform: scale(1.05);
        }

        .series-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: .4rem;
            font-family: OPlusSans30;
            font-size: .28rem;
            color: #FEDFC0;
            line-height: .4rem;
            font-style: normal;
            text-align: center;
            margin: .15rem 0 0;
        }

        .footer {
            text-align: center;
            padding: 15px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            background-color: #a01a1a;
        }

        /* 加载更多按钮 */
        .load-more {
            text-align: center;
            padding: 15px 0 20px;
        }

        .load-more-btn {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .load-more-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <div class="container">


        <!-- 标题 banner -->

        <img src="./img/index_bj.png" alt="典藏北京" class="banner-img">


        <!-- 内容区域 -->
        <div class="content">
            <!-- 系列介绍 -->
            <div class="intro-box">
                《典藏北京》是首都图书馆倾力打造的地方特色资源建设品牌，于2009年筹划建设，依托丰富的馆藏资源，以独特的视角展现北京古都风貌，风土人情。专题片每集时长为30分钟，微视频每集时长为5-8分钟，结合实景拍摄，专家解说，书籍资料，真实、全面、科学的为观众再现历史，重塑旧京城的点滴。
            </div>

            <!-- 系列列表 -->
            <div class="series-t"></div>
            <div class="series-grid">
                <!-- 旧京戏楼 -->
                <div class="series-item">
                    <a href="detail.html" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(0).png" alt="旧京戏楼" class="series-img">
                        </div>
                        <div class="series-name">旧京戏楼</div>
                    </a>
                </div>

                <!-- 北京科举考试 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(1).png" alt="北京科举考试" class="series-img">
                        </div>
                        <div class="series-name">北京科举考试</div>
                    </a>
                </div>

                <!-- 近史重寻 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(2).png" alt="近史重寻" class="series-img">
                        </div>
                        <div class="series-name">近史重寻</div>
                    </a>
                </div>

                <!-- 爱新觉罗后裔口述历史 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(3).png" alt="爱新觉罗后裔口述历史" class="series-img">
                        </div>
                        <div class="series-name">爱新觉罗后裔口述历史</div>
                    </a>
                </div>

                <!-- 北京会馆 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(4).png" alt="北京会馆" class="series-img">
                        </div>
                        <div class="series-name">北京会馆</div>
                    </a>
                </div>

                <!-- 千年科举 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(5).png" alt="千年科举" class="series-img">
                        </div>
                        <div class="series-name">千年科举</div>
                    </a>
                </div>

                <!-- 北京春节庙会 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(6).png" alt="北京春节庙会" class="series-img">
                        </div>
                        <div class="series-name">北京春节庙会</div>
                    </a>
                </div>

                <!-- 国韵京剧-梨园弟子口述历史 -->
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="./img/dc_fm/位图(7).png" alt="国韵京剧-梨园弟子口述历史" class="series-img">
                        </div>
                        <div class="series-name">国韵京剧-梨园弟子口述历史</div>
                    </a>
                </div>
            </div>
            <div class="series-f"></div>

            <!-- 加载更多 -->
            <!-- <div class="load-more">
                <button class="load-more-btn"><i class="fa fa-refresh"></i> 加载更多</button>
            </div> -->
        </div>


    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        // 加载更多功能
        $(document).ready(function () {
            // 1. 动态计算根元素字体大小（原功能保留）
            function setRemUnit() {
                const designWidth = 750;
                const remBase = 100;
                const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
                document.documentElement.style.fontSize = (deviceWidth / designWidth * remBase) > 100 ? 100 + 'px' : (deviceWidth / designWidth * remBase) + 'px';
                document.querySelector('.container').style.opacity = 1;
            }
            setRemUnit();
            window.addEventListener('resize', setRemUnit);

            // 2. 加载更多核心逻辑
            let isLoading = false; // 加载锁：防止重复触发
            let currentPage = 1;   // 当前页码：用于模拟分页请求
            const totalPages = 3;  // 总页数：模拟有3页数据，可根据实际调整
            const $seriesGrid = $('.series-grid'); // 卡片列表容器

            // 3. 监听滚动事件
            $(window).scroll(function () {
                // 计算：页面滚动高度 + 可视窗口高度 >= 文档总高度 - 50px（距离底部50px）
                const scrollTop = $(this).scrollTop();
                const windowHeight = $(this).height();
                const documentHeight = $(document).height();

                // 触发条件：未加载中 + 滚动到指定位置 + 未到最后一页
                if (!isLoading && (scrollTop + windowHeight >= documentHeight - 50) && (currentPage < totalPages)) {
                    loadMoreContent(); // 执行加载
                }
            });

            // 4. 加载更多内容函数
            function loadMoreContent() {
                isLoading = true; // 锁定加载状态
                showLoadingTip(); // 显示“加载中”提示

                // 模拟后端请求延迟（1.5秒）
                setTimeout(function () {
                    // 模拟新数据（实际项目中替换为AJAX/axios请求后端接口）
                    const newItems = getMockData(currentPage);

                    // 将新卡片插入列表容器
                    $seriesGrid.append(newItems);

                    // 更新状态：页码+1，解锁加载
                    currentPage++;
                    isLoading = false;

                    // 隐藏“加载中”提示
                    hideLoadingTip();

                    // 若已加载全部，提示用户
                    if (currentPage >= totalPages) {

                    }

                }, 500);
            }

            // 5. 模拟获取新数据（实际项目替换为接口请求）
            function getMockData(page) {
                // 模拟不同页码的新卡片数据（图片、标题可根据实际调整）
                const mockData = [
                    // 第2页数据（page=2）
                    { img: './img/dc_fm/位图(8).png', name: '北京胡同文化' },
                    { img: './img/dc_fm/位图(9).png', name: '故宫建筑揭秘' },
                    { img: './img/dc_fm/位图(10).png', name: '老北京小吃故事' },
                    { img: './img/dc_fm/位图(11).png', name: '长城历史变迁' },
                    // 第3页数据（page=3）
                    { img: './img/dc_fm/位图(12).png', name: '颐和园皇家往事' },
                    { img: './img/dc_fm/位图(13).png', name: '京韵大鼓艺术' },
                    { img: './img/dc_fm/位图(14).png', name: '北京四合院文化' },
                    { img: './img/dc_fm/位图(15).png', name: '潭柘寺千年历史' }
                ];

                // 根据页码截取对应数据（每页4条）
                const start = (page - 1) * 4;
                const end = start + 4;
                const pageData = mockData.slice(start, end);

                // 生成HTML结构
                let html = '';
                pageData.forEach(item => {
                    html += `
                <div class="series-item">
                    <a href="#" class="series-card">
                        <div class="series-img-container">
                            <img src="${item.img}" alt="${item.name}" class="series-img">
                        </div>
                        <div class="series-name">${item.name}</div>
                    </a>
                </div>
            `;
                });

                return html;
            }

            // 6. 显示/隐藏“加载中”提示
            function showLoadingTip() {
                // 若已存在提示，则不再重复创建
                if ($('.loading-tip').length === 0) {
                    const tip = ``;
                    $seriesGrid.after(tip); // 插入到列表下方
                }
            }

            function hideLoadingTip() {
                $('.loading-tip').remove(); // 移除提示
            }

            // 7. 原卡片点击效果（保留）
            $('.series-card').click(function (e) {
                if (!$(this).find('.series-name').text().includes('旧京戏楼')) {
                    e.preventDefault();

                }
            });
            // 为动态添加的卡片绑定点击事件（委托绑定）
            $seriesGrid.on('click', '.series-card', function (e) {
                if (!$(this).find('.series-name').text().includes('旧京戏楼')) {
                    e.preventDefault();
                }
            });
        });
    </script>
</body>

</html>